import { Button, Form, Input, Cascader, Select } from 'antd';
import React from 'react';

import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import { connect } from 'dva';
import { CascaderOptionType } from 'antd/lib/cascader';
import { StateType } from '../../model';
import { Product } from '../../../../../models/product';
import { formItemLayout, singlePageFormLayout } from '../../../../../common/layout/form';
import { ProductCategory } from '@/models/productCategory';
import { CategoryModelState } from '../../../../../models/productCategory';
import { BrandModelState, Brand } from '../../../../../models/brand';

const { Option } = Select;
const { TextArea } = Input;

interface Step1Props extends FormComponentProps {
  data?: StateType['formData'];
  dispatch?: Dispatch<any>;
  categories: ProductCategory[];
  brands: Brand[];
}

const Step1: React.FC<Step1Props> = props => {
  const { form, dispatch, data, categories, brands } = props;
  const { getFieldDecorator, validateFields } = form;
  if (!data) {
    return null;
  }
  const {
    productCategoryIds,
    name,
    subTitle,
    brandOption,
    description,
    productSn,
    unit,
    price,
    originalPrice,
    stock,
    weight,
  } = data;
  const onValidateForm = () => {
    validateFields((err: any, values: StateType['formData']) => {
      if (!err && dispatch) {
        dispatch({
          type: 'addProduct/saveStepFormData',
          payload: values,
        });
        dispatch({
          type: 'addProduct/saveCurrentStep',
          payload: 'attribute',
        });
      }
    });
  };
  const categoryOptions: CascaderOptionType[] = categories.map(parent => ({
    value: parent.id.toString(),
    label: parent.name,
    children: parent.children
      ? parent.children.map(child => ({
          value: child.id.toString(),
          label: child.name,
        }))
      : undefined,
  }));
  const brandOptions = brands.map(item => (
    <Option key={item.id} value={item.id}>
      {item.name}
    </Option>
  ));
  return (
    <Form layout="horizontal" style={singlePageFormLayout}>
      <Form.Item {...formItemLayout} label="商品分类">
        {getFieldDecorator<Product>('productCategoryIds', {
          initialValue: productCategoryIds,
          rules: [{ required: true, message: '请选择商品分类' }],
        })(<Cascader options={categoryOptions} placeholder="请选择" />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="商品名称">
        {getFieldDecorator<Product>('name', {
          initialValue: name,
          rules: [{ required: true, message: '请输入商品名称' }],
        })(<Input />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="副标题">
        {getFieldDecorator<Product>('subTitle', {
          initialValue: subTitle,
          rules: [{ required: true, message: '请输入商品副标题' }],
        })(<Input />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="商品品牌">
        {getFieldDecorator<Product>('brandOption', {
          initialValue: brandOption,
          rules: [{ required: true, message: '请选择商品品牌' }],
        })(
          <Select labelInValue placeholder="请选择品牌">
            {brandOptions}
          </Select>,
        )}
      </Form.Item>
      <Form.Item {...formItemLayout} label="商品介绍">
        {getFieldDecorator<Product>('description', {
          initialValue: description,
        })(<TextArea />)}
      </Form.Item>
      {/* <Form.Item {...formItemLayout} label="商品货号">
        {getFieldDecorator<Product>('productSn', {
          initialValue: productSn,
        })(<Input />)}
      </Form.Item> */}
      <Form.Item {...formItemLayout} label="商品售价">
        {getFieldDecorator<Product>('price', {
          initialValue: price,
        })(<Input />)}
      </Form.Item>
      {/* <Form.Item {...formItemLayout} label="市场价">
        {getFieldDecorator<Product>('originalPrice', {
          initialValue: originalPrice,
        })(<Input />)}
      </Form.Item> */}
      {/* <Form.Item {...formItemLayout} label="库存">
        {getFieldDecorator<Product>('stock', {
          initialValue: stock,
        })(<Input />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="计量单位">
        {getFieldDecorator<Product>('unit', {
          initialValue: unit,
        })(<Input />)}
      </Form.Item> */}
      {/* <Form.Item {...formItemLayout} label="商品重量">
        {getFieldDecorator<Product>('weight', {
          initialValue: weight,
        })(<Input suffix="克" />)}
      </Form.Item> */}
      <Form.Item
        wrapperCol={{
          xs: { span: 24, offset: 0 },
          sm: {
            span: formItemLayout.wrapperCol.span,
            offset: formItemLayout.labelCol.span,
          },
        }}
        label=""
      >
        <Button type="primary" onClick={onValidateForm}>
          下一步，填写商品属性
        </Button>
      </Form.Item>
    </Form>
  );
};

export default connect(
  ({
    addProduct,
    productCategory,
    brand,
  }: {
    addProduct: StateType;
    productCategory: CategoryModelState;
    brand: BrandModelState;
  }) => ({
    data: addProduct.formData,
    categories: productCategory.categories,
    brands: brand.brands,
  }),
)(Form.create<Step1Props>()(Step1));
